import React, {useEffect, useState} from "react";

import {createStyles} from "antd-style"
import SystemInfoApi, {GpuInfo} from "@/api/web/SystemInfoApi.ts";
import {Collapse} from "antd";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            width: 100%;
            p {
                display: flex;
                span {
                    margin-left: auto;
                }
            }
        `
    }
})

const GpuInfoCard: React.FC = () => {
    const styles = useStyles().styles;
    const [gpuInfoList, setGpuInfoList] = useState<GpuInfo[]>([])

    useEffect(() => {
        SystemInfoApi.getGpuInfo().then(res => {
            setGpuInfoList(res.data)
        })
    }, []);

    return (
        <div className={styles.container}>
            <h3 style={{
                fontSize: 17,
                fontWeight: 600,
                textAlign: "center",
                margin: "8px auto",
            }}>GPU 信息</h3>
            {gpuInfoList &&
                <Collapse
                    ghost
                    items={gpuInfoList.map(item => ({
                        key: item.deviceId,
                        styles: {
                            header: {fontSize: 17}
                        },
                        label: item.name,
                        children: <>
                            <p>GPU名称<span>{item.name}</span></p>
                            <p>GPU ID<span>{item.deviceId}</span></p>
                            <p>生产厂商<span>{item.vendor}</span></p>
                            <p>版本信息<span>{item.versionInfo}</span></p>
                            <p>显存容量<span>{(item.vram / 1024 / 1024).toFixed(2)}MB</span></p>
                        </>
                    }))}
                />
            }
        </div>
    )
}

export default GpuInfoCard
